import { useAppDispatch, useAppSelector } from '../../store/hooks'
import { increment, decrement, incrementByAmount } from '../../store/slices/counterSlice'
import { Card, Avatar, Tag } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import styles from './index.module.scss'

const Home = () => {
  const count = useAppSelector((state) => state.counter.value)
  const user = useAppSelector((state) => state.user.user)
  const dispatch = useAppDispatch()

  return (
    <div className={styles.homeContainer}>
      <h1 className={styles.title}>首页</h1>
      
      {/* 用户信息卡片 */}
      {user && (
        <Card className={styles.userCard} style={{ marginBottom: '20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
            <Avatar size={64} icon={<UserOutlined />} />
            <div>
              <h2 style={{ margin: 0 }}>欢迎, {user.name || user.username}!</h2>
              <p style={{ margin: '8px 0', color: '#666' }}>用户名: {user.username}</p>
              <Tag color="blue">角色: {user.role}</Tag>
            </div>
          </div>
        </Card>
      )}

      <div className={styles.counterSection}>
        <h2 className={styles.counterTitle}>计数器示例 (Redux Toolkit)</h2>
        <div className={styles.counterControls}>
          <button onClick={() => dispatch(decrement())}>-</button>
          <span className={styles.counterDisplay}>{count}</span>
          <button onClick={() => dispatch(increment())}>+</button>
        </div>
        <div className={styles.counterButtons}>
          <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
        </div>
      </div>
    </div>
  )
}

export default Home

